<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <title></title>
    <style>
         ul{
             margin: 50px auto;
             padding: 0;
             list-style: none;
             width: 216px;
             background-color: #eee;
             border: 4px solid #eee;
             overflow: hidden;
         }   
         li{
             width: 50px;
             height: 50px;
             margin: 2px;
             float: left;
         }
         li.first{
             width: 158px;
             height: 158px;
         }
         img{
             border-radius: 3px;
         }
    </style>
</head>

<body>
    <ul>
        <li class="first"><img src="img/big_1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_4.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_5.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_6.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_7.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_8.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_9.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_10.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_11.jpg" alt=""></a></li>
    </ul>
</body>

</html>

<script>

    var imgs = document.querySelectorAll('img');

    // 从第二张开始每一张添加鼠标进来的事件
    for (var i = 1; i < imgs.length; i++) {
        imgs[i].index = i;
        imgs[i].onmouseover = function(){
            // 方式一
            // imgs[0].src = 'img/big_' + this.index + '.jpg';

            // 方式二
            // replace()替换字符串 参数1.替换掉的内容 参数2.新内容
            imgs[0].src = this.src.replace('small','big');
        }
    }

</script>